<template>
	<view class="wrapper">
		<view class="header">
			<image v-if="config.logo" :src="config.logo" mode=""></image>
			<text>{{config.sys_title}}</text>
		</view>
		<view class="form">
			<view class="title">登录</view>
			<u-form labelPosition="left" :model="model" :rules="rules" ref="uForm">
				<u-form-item label=" " labelWidth="0" borderBottom ref="item1">
					<u--input v-model="model.phone" placeholder="请输入手机号码" border="none"
						prefixIcon="phone-fill"></u--input>
				</u-form-item>
				<u-form-item label=" " labelWidth="0" borderBottom>
					<u--input v-model="model.password" border="none" placeholder="请输入登录密码" prefixIcon="lock-fill"
						type="password"></u--input>
				</u-form-item>
			</u-form>
		</view>
		<view @click="onLogin" class="phone-btn">立即登录</view>
		<text @click="toRegister" class="new-user">注册新用户</text>
		<view class="policy">
			<u-checkbox-group width="50rpx" height="50rpx"><u-checkbox v-model="checked" shape="circle"
					@change="onChange"></u-checkbox></u-checkbox-group>
			<view class="xy">
				阅读并同意
				<text>用户协议</text>
				、
				<text>隐私政策</text>
				、
				<text>服务监督协议</text>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
    import {isWeiXin} from '@/common/helper.js'
    import siteinfo from '@/siteinfo';
	export default {
		data() {
			return {
				checked: false,
				model: {
					phone: undefined,
					password: undefined,
				},
				rules: {

				},
				config: store.state.config
			};
		},
		methods: {
			async onLogin() {
				if (!this.checked) return this.$u.toast('请同意协议')
				if (!uni.$u.test.mobile(this.model.phone)) return this.$u.toast('请输入手机号')
				if (!this.model.password) return this.$u.toast('请输入密码')

				const res = await this.$request.post('login.loginByMobileH5', this.model)
                this.$u.toast(res.msg);
                if (!res.errno) {
                    uni.setStorageSync('userInfo', res.data)

                    // #ifdef WEB
                    if(isWeiXin()){
                        uni.removeStorageSync('is_first_weixin_web');
                        window.location.href = siteinfo.h5siteroot+'/pages/index/index';
                    }
                    // #endif

                    setTimeout(() => {
                        this.$u.route({
                            url: "/pages/index/index",
                            type: "redirectTo"
                        })
                    }, 1000)
                }

				/*uni.setStorageSync('userInfo', {
					sessionid: res.data
				})

				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				setTimeout(() => {
					this.$u.route({
						url: "/pages/index/index",
						type: "redirectTo"
					})
				}, 1000)
				this.$u.toast(data.msg)*/
			},
			toRegister() {
				uni.$u.route({
					url: "/pages/login/registerH5"
				})
			},
			onChange() {
				this.checked = !this.checked;
			}
		},
		onLoad() {
			console.info(99999999999999999999)
		}
	};
</script>

<style scoped lang="scss">
	.wrapper {
		.header {
			padding-top: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 180rpx;
				height: 180rpx;
				margin-bottom: 20rpx;
			}

			text {
				font-weight: 600;
				font-size: 30rpx;
			}
		}

		.form {
			width: 90%;
			margin: 40rpx auto;

			.title {
				font-weight: 600;
				font-size: 30rpx;
				margin-bottom: 30rpx;
			}
		}

		.phone-btn {
			width: 80%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			background: rgb(71, 128, 245);
			border-radius: 50rpx;
			margin-top: 100rpx;
			margin: 10rpx auto;
		}

		.new-user {
			margin: 20rpx auto;
			display: block;
			text-align: center;
		}

		.other-login {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			bottom: 160rpx;
			left: 50%;
			transform: translateX(-50%);

			text {
				font-size: 30rpx;
				color: #ccc;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				background: rgb(71, 128, 245);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;

				image {
					width: 50%;
					height: 60%;
				}
			}
		}

		.policy {
			width: 90%;
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);

			.xy {
				font-size: 24rpx;
				color: #ccc;
				margin-left: 6rpx;

				text {
					color: rgb(71, 128, 245);
				}
			}
		}
	}
</style>